<!-- UnitCalculator.vue -->
<template>
  <div class="unit-calculator">
    <div class="control-item">
      <label for="unitPrice">每单位价格:</label>
      <input
          type="number"
          id="unitPrice"
          v-model="unitPrice"
          step="0.0001"
          min="0"
      >
    </div>

    <div class="control-item">
      <label for="unitPriceValue">单价值:</label>
      <input
          type="number"
          id="unitPriceValue"
          v-model="unitPriceValue"
          step="0.01"
          min="0"
      >
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'UnitCalculator',
  props: {
    initialData: {
      type: Object,
      default: () => ({
        unitPrice: 0,
        agentRate: false,
        unitPriceValue: 0
      })
    },
    calculatorId: {
      type: String,
      required: true
    },
    feeId: {
      type: String,
      required: true
    },
    parentId: {
      type: String,
      required: true
    }
  },
  emits: ['update:data'],
  setup(props, { emit }) {
    const unitPrice = ref(props.initialData.unitPrice)
    const agentRate = ref(props.initialData.agentRate)
    const unitPriceValue = ref(props.initialData.unitPriceValue)

    const updateData = () => {
      emit('update:data', {
        id: props.calculatorId,
        feeId: props.feeId,
        parentId: props.parentId,
        type: 'UNT',
        unitPrice: unitPrice.value,
        agentRate: agentRate.value,
        unitPriceValue: unitPriceValue.value
      })
    }

    watch([unitPrice, agentRate, unitPriceValue], updateData)

    return {
      unitPrice,
      agentRate,
      unitPriceValue,
      updateData
    }
  }
}
</script>

<style scoped>
.unit-calculator {
  margin-top: 10px;
}

.control-item input[type="number"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
